import React, { useEffect, useState } from 'react';
import { Badge, Tag, Card, Button } from '@nutui/nutui-react';
import { Location, ArrowRight } from '@nutui/icons-react';
import styles from './reservation.module.css';
import { useLocation, useNavigate } from 'react-router-dom';
import axios from 'axios';
const HotelInfo = ({ hotel }) => {
    // 假设传入的酒店数据，实际使用时替换为真实数据
    const hotelData = hotel || {
        name: '汉庭(唐山市政府万达广场店)',
        type: '经济型',
        tags: ['接收医保测试结果阳性客'],
        rating: 5.0,
        aiComments: '性价比还可以',
        reviews: 883,
        openYear: 2019,
        features: ['免费停车场', '快速入住退房', '24小时前台'],
        location: {
            landmark: '火车站/市政府区',
            address: '新华东道52号(第十一中学对面,英卓口腔医院西侧)',
            distanceToCenter: 7.3,
            distanceToPark: 500
        },
        promotions: [
            { type: '支付红包', amount: 50 },
            { type: '支付红包', amount: 15 },
            { type: '支付红包', amount: 4 }
        ],
        hasBonus: true
    };


    // 获取房间列表
    const [list, setList] = useState([])
    const roomList = async () => {
        await axios.post('http://localhost:3010/roomlist')
            .then(res => {
                console.log(res.data.data);

                setList(res.data.list)
            })
    }

    // 获取路由信息
    const location = useLocation()
    const state = location.state


    // console.log(location.state.val)
    const navigate = useNavigate()
    const toOrder = (i) => {
        navigate('/order', { state: { val: i, title: state.val.title, start: state.start, end: state.end, jument: '李金雨' } })
    }
    useEffect(() => {
        roomList()
        localStorage.setItem("hotelName", state.val.title)
        localStorage.setItem("hotelPosition", JSON.stringify(state.val.hotelPosition))
    }, [])

    return (
        <div>
            <div>
                {/* <img src="https://img2.baidu.com/it/u=3184610062,141042565&fm=253&fmt=auto&app=138&f=JPEG?w=1250&h=800" alt="" height={240} /> */}

                <img src={state.val.img} alt="" className={styles.ljyImage} />


            </div>
            <div className={styles.hotelInfoCard}>
                {/* 酒店名称和类型 */}
                <div className={styles.hotelHeader}>
                    <div className={styles.hotelTitle}>
                        <h2 className={styles.hotelName}>{state.val.title}</h2>
                        <Badge className={styles.hotelTypeBadge} >{state.val.type}</Badge>
                    </div>
                </div>

                {/* 酒店标签 */}
                <div className={styles.hotelTags}>
                    {hotelData.tags.map((tag, index) => (
                        <Tag key={index} type="primary" className={styles.hotelTag}>
                            {tag}
                        </Tag>
                    ))}
                </div>

                {/* 评分和评论 */}
                <div className={styles.hotelRatings}>
                    <div className={styles.ratingScore}>
                        <span className={styles.score}>{state.val.sort}</span>
                        <span className={styles.scoreLabel}>{state.val.evaluate}</span>
                    </div>
                    <div className={styles.aiComments}>
                        {/* <Tag type="info">AI总结</Tag>
                        <span>"{hotelData.aiComments}"</span> */}
                    </div>
                    <div className={styles.reviewCount}>
                        <span>{state.val.evaluateNum}条评价</span>
                        <ArrowRight className={styles.iconRight} />
                    </div>
                </div>

                {/* 酒店信息 */}
                <div className={styles.hotelInfoRow}>
                    <div className={styles.infoYear}>
                        {state.val.year}年开业
                    </div>
                    <div className={styles.infoFeatures}>
                        {state.val.default.map((feature, index) => (
                            <span key={index} className={styles.featureItem}>
                                {feature}
                            </span>
                        ))}
                    </div>
                </div>

                {/* 位置信息 */}
                <div className={styles.hotelLocation}>
                    <div className={styles.locationArea}>
                        <Location className={styles.locationIcon} />
                        <span className={styles.areaName}>{state.val.addr}</span>
                        {/* <span className={styles.locationAddress}>{hotelData.location.address}</span> */}
                    </div>

                    <div className={styles.distanceInfo}>
                        <div className={styles.distanceItem}>
                            <span className={styles.distanceLabel}>距上海虹桥机场</span>
                            <span className={styles.distanceValue}>{state.val.walk}公里</span>
                        </div>
                        <div className={styles.divider}></div>
                        {/* <div className={styles.distanceItem}>
                            <span className={styles.distanceLabel}>距开滦国家矿山公园</span>
                            <span className={styles.distanceValue}>约{hotelData.location.distanceToPark}米</span>
                        </div> */}
                        <div className={styles.mapLinks}>
                            <span className={styles.mapLink}>交通</span>
                            <span className={styles.mapLinkDivider}>|</span>
                            <span className={styles.mapLink}>地图/导航</span>
                        </div>
                    </div>
                </div>

                {/* 促销信息 */}
                <div className={styles.hotelPromotions}>
                    {hotelData.promotions.map((promo, index) => (
                        <div key={index} className={styles.promoTag}>
                            <span className={styles.promoText}>{promo.type}¥{promo.amount}</span>
                        </div>
                    ))}

                    {hotelData.hasBonus && (
                        <div className={styles.bonusButton}>
                            <span>领取</span>
                            <ArrowRight className={styles.iconMini} />
                        </div>
                    )}
                </div>
            </div>
            {/* 时间选择 */}
            <div>

            </div>
            {/* 房型选择 */}
            <div>
                {
                    list.map(i => {
                        return (
                            <div key={i._id} style={{
                                marginTop: '10px', backgroundColor: 'white',
                                padding: '6px',
                                margin: '10px',
                                borderRadius: '10px'
                            }}>
                                <Card
                                    src={i.img}
                                    title={i.name}
                                    price={i.price}
                                    // vipPrice={}
                                    // shopDescription={i.price}
                                    delivery={i.delivery}
                                    shopName={<div><span>{i.desc}</span> <span>{i.area}㎡</span><span>{i.people}人入住</span></div>}
                                    extra={<div><Button type="warning" onClick={() => toOrder(i)}>抢</Button></div>}
                                />
                            </div>
                        )
                    })
                }
            </div>

        </div>
    );
};

export default HotelInfo;